<template>
  <div class="seach">
    <!-- 搜索-->
    <button @click="back" class="col-1 ms-5 mt-5">返回</button>
    <hr>
    <div v-show="goods">
      <div v-for="item in goods" :key="item" class="row m-0 p-0 bg-secondary bg-opacity-10 justify-content-center">
            <div class="col-2 p-0 m-3">
              <img :src="item.goodsimg" height="300" width="250" alt="" @click="toabout(item)" style="cursor:pointer">
            </div>
            <div class="col-5 mt-3">
              <div @click="toabout(item)" style="cursor:pointer">
                <div class="mb-3"><h2 style="color: black;"><router-link :to="about+item.id">{{item.goodsname}}</router-link></h2></div>
                <div><h4>{{item.data}}</h4></div>
                <div class="row p-0 mt-3">
                  <span class="col-12">原价：{{item.marketPrice}}</span>
                  <span class="col-12 fs-5" style="color: red;">优惠价：{{item.goodsprice}}</span>
                </div>
              </div>
              
              <div class="row pt-5 mt-5">
                <button @click="add(item)" class="col-5">加入购物车</button> <button class="col-5" @click="pay(item)">立即购买</button>
              </div>
            </div>
            
          </div>
    </div>
    <div v-show="!goods">
      <div>
        非常抱歉没有此商品
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'SearchView',
  data(){
    return{
       obj:[],
      about:'/about/'
    }
  },
  methods:{
    pay(x){
      if(!this.$store.state.userInfo.username){
        alert('请先登录再进行购买！')
        this.$router.push({
            path: '/login'
        })
      } 
      console.log(x)
      this.$router.push({
          name:"order",
          params:{
            id:JSON.stringify([x])
          }
      })
        
    },
    toabout(x){
      this.$router.push({
          name:"about",
          params:{
            id:JSON.stringify(x)
          }
      })
    },
    back(){
      this.$router.go(-1)
    },
    add(x){
      if(!this.$store.state.userInfo.username){
          this.$router.push({
              path: '/login'
          })
      }else{
        this.$router.push({
            name:"cart",
            params:{
              id:JSON.stringify(x)
            }
        })
      }
      
    }
  },
  computed:{
    goods(){
      const x=this.$route.params.id;
      return x?this.obj.filter(item=>item.data.indexOf(x)!==-1):[]
    }
  },
  created(){
      axios.get(`http://127.0.0.1:4523/m1/1263105-0-default/good`).then(
        (res)=>{
          console.log(res.data.obj)
          // console.log(this.$route.params.id)
          this.obj=res.data.obj;
        }
      ).catch((error)=>{
        console.log(error)
      })
  }
      
}

</script>
<style scoped>
.seach button{
    height: 40px;
    padding: 5px;
    margin-left: 5px;
    border-radius: 5px;
    background-color: white;
    border: 2px solid #93d2f3;
  }
  .seach button:hover{
    background-color: #93d2f3;
    color: white;
  }
  .seach a{
    text-decoration: none;
    color: black;
  }
</style>
